<template>
    <el-drawer
        v-model="drawerData.show"
        custom-class="drawer-box"
        :destroy-on-close="true"
        :title="drawerData.title"
        direction="rtl"
        size="40%">
        <template #title>
            <span class="drawer-title">{{ drawerData.title }}</span>
        </template>
        <div>
            <div class="exp_btn">
                <el-button @click="exportDetils">导出明细</el-button>
            </div>
            <ZwTable
                ref="tableRef"
                class="table-box"
                :option="tableOption"
                :row-key="getRowKey"
                :fetch-params="state.searchParams"
                :fetch-api="fetchApi()"
                @selection-change="handleSelectionChange"
                @radioChange="radioChange">
            </ZwTable>
        </div>
    </el-drawer>
</template>

<script lang="tsx" setup>
import { ref, defineExpose, reactive, computed } from 'vue';
import ZWPagination from '@/components/ZWPagination.vue';
import { getCustomerDetail, getCustomerExport } from '@/api/smartMarketing/storeCustomers';
import { watch } from 'vue';
import { useStore } from '@/store';
import ZwTable from '@/components/zw/table/Table';
import { deepCopy } from '@/utils/helper';
import { ElMessage, ElImage, ElIcon, ElButton } from 'element-plus';
import { Picture as IconPicture } from '@element-plus/icons-vue';

const PaginationRef = ref({});
const store = useStore();
const tableData = ref([]);
const drawerData = ref({
    activityId: '',
    show: false,
    title: '客户明细',
    userInfo: {} //查看
});
const params = reactive({
    activity_id: drawerData.value.activityId,
    page_size: 15,
    page: 1
});
const tableOption = computed(() => {
    const arr = [
        {
            prop: 'cust_avatar',
            label: '客户信息',
            width: 220,
            render({ row, column, index }) {
                const slotError = () => (
                    <div class="image_slot">
                        <ElIcon style="font-size: 36px">
                            <IconPicture />
                        </ElIcon>
                    </div>
                );
                return (
                    <div class="avatar-box">
                        <ElImage vSlots={{ error: slotError }} src={row.avatar} fit="cover" class="avatar"></ElImage>
                        <div class="name">{row.cust_nickname || row.cust_name}</div>
                    </div>
                );
            }
        },
        {
            prop: 'user_name',
            label: '添加成员',
            width: 100,
            render({ row }) {
                return <span>{row.user_name || '--'}</span>;
            }
        },
        {
            prop: 'cust_status',
            label: '客户状态',
            width: 100,
            render({ row }) {
                return <span>{row.cust_status || '--'}</span>;
            }
        },
        {
            prop: 'store_name',
            label: '引流门店',
            width: 150,
            render({ row }) {
                return <span>{row.store_name || '--'}</span>;
            }
        },
        {
            prop: 'created_at',
            label: '添加时间',
            width: 170,
            render({ row }) {
                return <span>{row.created_at || '--'}</span>;
            }
        }
    ];
    return arr;
});
const defaultParams = reactive({
    activity_id: ''
});
const state = reactive({
    searchParams: deepCopy({ ...defaultParams, activity_id: drawerData.value.activityId })
});
const fetchApi = () => {
    // 获取文件列表
    return getCustomerDetail;
};
const getRowKey = (row: any) => {
    return row.id;
};
const exportDetils = () => {
    getCustomerExport(state.searchParams).then((res: any) => {
        window.location.href = res.url;
    });
};

defineExpose({
    drawerData,
    state
});
</script>

<style lang="scss" scoped>
:deep(.avatar-box) {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    .avatar {
        width: 36px;
        height: 36px;
        border-radius: 4px;
    }

    .image-slot {
        .el-icon {
            font-size: 36px;
        }
    }

    .name {
        font-size: 14px;
        font-family: STHeitiSC-Light, STHeitiSC;
        font-weight: 300;
        color: #33302d;
        max-width: 109px;
        white-space: nowrap;
        text-overflow: ellipsis;
        overflow: hidden;
        word-break: break-all;
        margin: 0 10px;
    }
    .sex {
        width: 18px;
        height: 18px;
    }
}
.exp_btn {
    text-align: right;
    margin-bottom: 14px;
}
</style>
